<template>
<div>
  <div class="menuview-wrapper">
    <div class="menu-wrapper" ref="menuScroll">
      <div>
        <div @click="scrollto(index)" class="item" :class="{act:menuIndex===index}" v-for="(f,index) in goods">
          {{f.name}}
        </div>
      </div>
    </div>
    <div class="food-wrapper" ref="foodScroll">
      <div>
        <dl class="" v-for="g in goods">
          <dt>
            {{g.name}}
          </dt>
          <dd v-for="food in g.foods">
            <img :src="food.icon" alt="" />
            <div class="food-info">
              <h4>{{food.name}}</h4>
              <p class="desc" v-if="food.info">
                {{food.info.substr(0,17)+'...' }}
              </p>
              <P class="rating">
                月售{{food.sellCount}}份 好评率{{food.rating}}%
              </P>
              <p class="price">
                <span>￥{{food.price}}</span>
                <cartbutton :food="food" @ball-click="ballEvent"></cartbutton>
              </p>
            </div>
          </dd>
        </dl>
      </div>
    </div>
  </div>
  <shopcar :selectedFoods="selectedFoods" ref="shopCart"></shopcar>
</div>
</template>
<script>
import shopcar from './shopcar.vue';
import Bscroll from 'better-scroll';
import cartbutton from './cartbutton';
export default {
  data() {
    return {
      scrollY: 0,
      heights: [],
      goods: {
        type: Array
      }
    }
  },
  components: {
    shopcar,
    Bscroll,
    cartbutton
  },
  mounted() {
    this.$http.get(
      'http://localhost:8080/api/goods'
    ).then((res) => {
      if (res.data.errno == 0) {
        this.goods = res.data.data;
        this.$nextTick(() => {
          this._initScroll();
          this._countHeight();
        });
      }
    }, (res) => {
      console.log('请求失败')
    })

  },
  computed: {
    menuIndex() {
      for (let i = 0; i < this.heights.length; i++) {
        let now = this.heights[i];
        let next = this.heights[i + 1];
        if (now >= this.scrollY && this.scrollY < next) {
          return i;
        } else if (!next) {
          return i;
        }
      }
      return 0;
    },
    selectedFoods() {
      let foods = [];
      if (this.goods.length == 0) {
        return []
      }
      for (var i = 0; i < this.goods.length; i++) {
        let good = this.goods[i];
        good.foods.forEach(food => {
          if (food.count > 0) {
            foods.push(food);
          }
        })
      }
      return foods;
    }
  },
  methods: {
    ballEvent(target) {
      this.$refs.shopCart.ballClick(target);
    },
    //初始化滚动条
    _initScroll() {
      this.menuScroll = new Bscroll(this.$refs.menuScroll, {
        click: true
      });
      this.foodScroll = new Bscroll(this.$refs.foodScroll, {
        probeType: 3,
        click: true
      });
      this.foodScroll.on('scroll', (pos) => {
        this.scrollY = Math.abs(Math.round(pos.y));
        console.log(this.scrollY)
      })
    },
    _countHeight() {
      let dts = this.$refs.foodScroll.getElementsByTagName('dt');
      for (let i = 0; i < dts.length; i++) {
        this.heights.push(dts[i].offsetTop);
      }
      console.log(this.heights)
    },
    scrollto(index) {
      // this.menuIndex = index;
      this.foodScroll.scrollTo(0, -this.heights[index], 100);
    }
  }

}
</script>
<style lang="less" scoped>
@import '../../static/less/var.less';
.menuview-wrapper {
    position: absolute;
    top: @base*351rem;
    bottom: @base*96rem;
    width: 100%;
    display: flex;
    .menu-wrapper {
        width: @base*180rem;
        // height: 100%;
        background: #fff;
        overflow: hidden;

        .item {
            padding: @base*30rem @base*10rem;
            border-bottom: 1px solid @bc1;
            font-size: @base*28rem;
            color: @fc1;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .act {
            border-left: @base*6rem solid @mc;
        }
    }
    .food-wrapper {
        flex: 1;
        background: #fff;
        overflow: hidden;
        dl {
            dt {
                color: #333;
                font-size: @base*24rem;
                padding: @base*8rem @base*20rem;
                background: #f5f5f5;
            }
            dd {
                padding: @base*10rem @base*20rem;
                display: flex;
                border-bottom: 1px solid @bc1;
                img {
                    width: @base*104rem;
                    height: @base*104rem;
                }
                .food-info {
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    margin-left: @base*20rem;
                    color: @fc1;
                    h4 {
                        font-size: @base*30rem;
                        color: #333;
                    }
                    .desc {
                        font-size: @base*8rem;
                        color: @fc1;
                    }
                    .rating {
                        font-size: @base*8rem;

                    }
                    .price {
                        color: @mc;
                        font-size: @base*30rem;
                        font-weight: 700;
                        display: flex;
                        justify-content: space-between;
                    }
                }
            }
        }
    }
}
</style>
